<template>
    <div class="x6-demo-container">
        <div ref="container" id="container" class="x6-graph-container"></div>
    </div>
</template>

<script setup>
import CustomVueNode from "./CustomVueNode.vue"
import { onMounted, ref } from 'vue';
import { Graph } from '@antv/x6';
import { register } from '@antv/x6-vue-shape';

const container = ref(null);
let graph = null;

// Add this before creating the graph

Graph.registerNode(
  'org-node',
  {
    width: 180,
    height: 80,
    markup: [
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'image',
        selector: 'avatar',
      },
      {
        tagName: 'text',
        selector: 'rank',
      },

      {
        tagName: 'text',
        selector: 'tagcode',
      },
      {
        tagName: 'text',
        selector: 'name',
      },
    ],
    attrs: {
      body: {
        refWidth: '100%',
        refHeight: '100%',
        fill: '#5F95FF',
        stroke: '#5F95FF',
        strokeWidth: 1,
        rx: 10,
        ry: 10,
        pointerEvents: 'visiblePainted',
      },
      avatar: {
        width: 48,
        height: 48,
        refX: 8,
        refY: 6,
      },
      rank: {
        refX: 0.9,
        refY: 0.2,
        fill: '#fff',
        fontFamily: 'Courier New',
        fontSize: 14,
        textAnchor: 'end',
        textDecoration: 'underline',
      },
      name: {
        refX: 0.9,
        refY: 0.6,
        fill: '#fff',
        fontFamily: 'Courier New',
        fontSize: 14,
        fontWeight: '800',
        textAnchor: 'end',
      },

      tagcode: {
        refX: 0.9,
        refY: 0.9,
        fill: 'red',
        fontFamily: 'Courier New',
        fontSize: 14,
        fontWeight: '800',
        textAnchor: 'end',
      }
    },
  },
  true,
);

Graph.registerEdge(
  'org-edge',
  {
    zIndex: -1,
    attrs: {
      line: {
        fill: 'none',
        strokeLinejoin: 'round',
        strokeWidth: 2,
        stroke: '#A2B1C3',
        sourceMarker: null,
        targetMarker: null,
      },
    },
  },
  true,
);
// Register Vue component
// register({
//   shape: 'vue-node',
//   component: CustomVueNode,
// });

register({
  shape: 'vue-node',
  width: 100,
  height: 80,
  component: CustomVueNode,
  inherit: 'rect', // 继承自 rect 而不是默认的 foreignObject
  markup: [
    {
      tagName: 'rect',
      selector: 'body'
    }
  ],
  attrs: {
    body: {
      fill: 'red', // 透明背景
      stroke: 'none',      // 无边框
      refWidth: '100%',
      refHeight: '100%'
    }
  }
})

let obj={
    "cells": [
        {
            "shape": "org-edge",
            "zIndex": -1,
            "id": "c138be82-4abb-480a-868e-8983a76e876c",
            "source": {
                "cell": "b875dc16-9780-4456-9702-6fc84f999d1b"
            },
            "target": {
                "cell": "8bb81e40-810f-4c9e-bebd-357e4f0242ba"
            },
            "vertices": [
                {
                    "x": 385,
                    "y": 180
                }
            ]
        },
        {
            "shape": "org-edge",
            "zIndex": -1,
            "id": "4138e399-b655-45a8-8017-0e2b71b07ce4",
            "source": {
                "cell": "b875dc16-9780-4456-9702-6fc84f999d1b"
            },
            "target": {
                "cell": "aeda1c22-1103-4065-b691-82b99e8b67f6"
            },
            "vertices": [
                {
                    "x": 385,
                    "y": 180
                },
                {
                    "x": 175,
                    "y": 180
                }
            ]
        },
        {
            "shape": "org-edge",
            "zIndex": -1,
            "id": "6b3585b3-4ba2-466d-a03c-a95a3928c2f2",
            "source": {
                "cell": "b875dc16-9780-4456-9702-6fc84f999d1b"
            },
            "target": {
                "cell": "d65a30c1-28c0-47a9-8672-4cd2b18a0a2a"
            },
            "vertices": [
                {
                    "x": 385,
                    "y": 180
                },
                {
                    "x": 585,
                    "y": 180
                }
            ]
        },
        {
            "shape": "org-edge",
            "zIndex": -1,
            "id": "f26831eb-62f5-4d4b-8883-60ae007ab2f1",
            "source": {
                "cell": "aeda1c22-1103-4065-b691-82b99e8b67f6"
            },
            "target": {
                "cell": "d87327fb-6dab-455d-b7d7-97e2dcb91ca6"
            },
            "vertices": [
                {
                    "x": 175,
                    "y": 380
                }
            ]
        },
        {
            "shape": "org-edge",
            "zIndex": -1,
            "id": "62cccb33-c122-48df-aa8d-aece498ad914",
            "source": {
                "cell": "aeda1c22-1103-4065-b691-82b99e8b67f6"
            },
            "target": {
                "cell": "1a5e30e0-1e73-4128-88e8-3fe92180c262"
            },
            "vertices": [
                {
                    "x": 175,
                    "y": 530
                }
            ]
        },
        {
            "shape": "org-edge",
            "zIndex": -1,
            "id": "54bb22fb-360d-40e8-b7a6-9fe9193906ab",
            "source": {
                "cell": "8bb81e40-810f-4c9e-bebd-357e4f0242ba"
            },
            "target": {
                "cell": "8da9d24f-60fc-4ca7-bd64-aa1523b699b0"
            },
            "vertices": [
                {
                    "x": 385,
                    "y": 380
                }
            ]
        },
        {
            "position": {
                "x": 300,
                "y": 70
            },
            "size": {
                "width": 180,
                "height": 80
            },
            "attrs": {
                "avatar": {
                    "opacity": 0.7,
                    "xlink:href": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*kUy8SrEDp6YAAAAAAAAAAAAAARQnAQ"
                },
                "rank": {
                    "text": "CEO",
                    "wordSpacing": "-7px",
                    "letterSpacing": 0
                },
                "name": {
                    "fontFamily": "Arial",
                    "fontSize": 13,
                    "text": "Bart Simpson",
                    "letterSpacing": 0
                },
                "tagcode": {
                    "text": "P(kW)",
                    "wordSpacing": "-5px",
                    "letterSpacing": 0
                }
            },
            "shape": "org-node",
            "id": "b875dc16-9780-4456-9702-6fc84f999d1b",
            "zIndex": 1
        },
        {
            "position": {
                "x": 90,
                "y": 200
            },
            "size": {
                "width": 180,
                "height": 80
            },
            "attrs": {
                "avatar": {
                    "opacity": 0.7,
                    "xlink:href": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*kUy8SrEDp6YAAAAAAAAAAAAAARQnAQ"
                },
                "rank": {
                    "text": "VP Marketing",
                    "wordSpacing": "-7px",
                    "letterSpacing": 0
                },
                "name": {
                    "fontFamily": "Arial",
                    "fontSize": 13,
                    "text": "Homer Simpson",
                    "letterSpacing": 0
                },
                "tagcode": {
                    "text": "P(kW)",
                    "wordSpacing": "-5px",
                    "letterSpacing": 0
                }
            },
            "shape": "org-node",
            "id": "aeda1c22-1103-4065-b691-82b99e8b67f6",
            "zIndex": 2
        },
        {
            "position": {
                "x": 300,
                "y": 200
            },
            "size": {
                "width": 180,
                "height": 80
            },
            "attrs": {
                "avatar": {
                    "opacity": 0.7,
                    "xlink:href": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*f6hhT75YjkIAAAAAAAAAAAAAARQnAQ"
                },
                "rank": {
                    "text": "VP Sales",
                    "wordSpacing": "-7px",
                    "letterSpacing": 0
                },
                "name": {
                    "fontFamily": "Arial",
                    "fontSize": 13,
                    "text": "Marge Simpson",
                    "letterSpacing": 0
                },
                "tagcode": {
                    "text": "P(kW)",
                    "wordSpacing": "-5px",
                    "letterSpacing": 0
                }
            },
            "shape": "org-node",
            "id": "8bb81e40-810f-4c9e-bebd-357e4f0242ba",
            "zIndex": 3
        },
        {
            "position": {
                "x": 500,
                "y": 200
            },
            "size": {
                "width": 180,
                "height": 80
            },
            "attrs": {
                "avatar": {
                    "opacity": 0.7,
                    "xlink:href": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*f6hhT75YjkIAAAAAAAAAAAAAARQnAQ"
                },
                "rank": {
                    "text": "VP Production",
                    "wordSpacing": "-7px",
                    "letterSpacing": 0
                },
                "name": {
                    "fontFamily": "Arial",
                    "fontSize": 13,
                    "text": "Lisa Simpson",
                    "letterSpacing": 0
                },
                "tagcode": {
                    "text": "P(kW)",
                    "wordSpacing": "-5px",
                    "letterSpacing": 0
                }
            },
            "shape": "org-node",
            "id": "d65a30c1-28c0-47a9-8672-4cd2b18a0a2a",
            "zIndex": 4
        },
        {
            "position": {
                "x": 400,
                "y": 350
            },
            "size": {
                "width": 180,
                "height": 80
            },
            "attrs": {
                "avatar": {
                    "opacity": 0.7,
                    "xlink:href": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*f6hhT75YjkIAAAAAAAAAAAAAARQnAQ"
                },
                "rank": {
                    "text": "Manager",
                    "wordSpacing": "-7px",
                    "letterSpacing": 0
                },
                "name": {
                    "fontFamily": "Arial",
                    "fontSize": 13,
                    "text": "Maggie Simpson",
                    "letterSpacing": 0
                },
                "tagcode": {
                    "text": "P(kW)",
                    "wordSpacing": "-5px",
                    "letterSpacing": 0
                }
            },
            "shape": "org-node",
            "id": "8da9d24f-60fc-4ca7-bd64-aa1523b699b0",
            "zIndex": 5
        },
        {
            "position": {
                "x": 190,
                "y": 350
            },
            "size": {
                "width": 180,
                "height": 80
            },
            "attrs": {
                "avatar": {
                    "opacity": 0.7,
                    "xlink:href": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*kUy8SrEDp6YAAAAAAAAAAAAAARQnAQ"
                },
                "rank": {
                    "text": "Manager",
                    "wordSpacing": "-7px",
                    "letterSpacing": 0
                },
                "name": {
                    "fontFamily": "Arial",
                    "fontSize": 13,
                    "text": "Lenny Leonard",
                    "letterSpacing": 0
                },
                "tagcode": {
                    "text": "P(kW)",
                    "wordSpacing": "-5px",
                    "letterSpacing": 0
                }
            },
            "shape": "org-node",
            "id": "d87327fb-6dab-455d-b7d7-97e2dcb91ca6",
            "zIndex": 6
        },
        {
            "position": {
                "x": 190,
                "y": 500
            },
            "size": {
                "width": 180,
                "height": 80
            },
            "attrs": {
                "avatar": {
                    "opacity": 0.7,
                    "xlink:href": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*kUy8SrEDp6YAAAAAAAAAAAAAARQnAQ"
                },
                "rank": {
                    "text": "Manager",
                    "wordSpacing": "-7px",
                    "letterSpacing": 0
                },
                "name": {
                    "fontFamily": "Arial",
                    "fontSize": 13,
                    "text": "Carl Carlson",
                    "letterSpacing": 0
                },
                "tagcode": {
                    "text": "P(kW)",
                    "wordSpacing": "-5px",
                    "letterSpacing": 0
                }
            },
            "shape": "org-node",
            "id": "1a5e30e0-1e73-4128-88e8-3fe92180c262",
            "zIndex": 7
        },
        {
            "position": {
                "x": 360,
                "y": 600
            },
            "size": {
                "width": 100,
                "height": 80
            },
            "visible": true,
            "shape": "vue-node",
            "id": "41b6b004-c7c5-42d3-bf6c-94f490586e3c",
            "data": {
                "title": "Vue Node"
            },
            "zIndex": 8
        },
        {
            "position": {
                "x": 300,
                "y": 200
            },
            "size": {
                "width": 100,
                "height": 80
            },
            "attrs": {
                "title": {
                    "0": "1",
                    "1": "1",
                    "2": "1",
                    "3": "2",
                    "4": "3"
                }
            },
            "visible": true,
            "shape": "vue-node",
            "id": "ca436d1c-1ae0-4f2e-9a05-f3ce3f9499f4",
            "data": {
                "title": "Vue Node"
            },
            "zIndex": 9
        }
    ]
}



onMounted(() => {
  graph = new Graph({
    container: container.value,
    connecting: {
      anchor: 'orth',
    },
  });

  // Verify data before loading
  if (obj && obj.cells) {
    try {
      graph.fromJSON(obj.cells);
      graph.zoomToFit({ padding: 20, maxScale: 1 });
    } catch (error) {
      console.error('Error loading graph:', error);
    }
  }
});
</script>

<style scoped>
.x6-demo-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.x6-graph-container {
    width: 800px;
    height: 600px;
    border: 1px solid #d9d9d9;
    margin: 0 auto;
}
</style>